<template>
	<view class="container">
	  <view class="input-box" v-if="!isAvatar">
	    <input v-model="value" auto-focus />
	    <view class="submit-btn" @click="editInfo">保存</view>
	  </view>
	  <view class="image-box" v-else>
	    <image class="user-avatar" :src="value"></image>
	    <view class="edit-avatar">
	      <view @click="toEditAvatar">修改头像</view>
	    </view>
	  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:"",
				isAvatar:false
			};
		},
		onLoad(options) {
		    let info = JSON.parse(decodeURI(options.info))
		    console.log(info)
		    uni.setNavigationBarTitle({
		      title: '修改' + info.name,
		    })
		    if(info.key == 'avatar'){
				this.isAvatar = true
		    }
			this.value = info.value
			this.key = info.key
			this.info = info
		  },
		  methods:{
			  editInfo(e){
				  const baseUrl = getApp().globalData.baseUrl
			      wx.request({
			        url: baseUrl + '/api/editSaleUserInfo',
			        method:'POST',
			        header:{
			          'token':wx.getStorageSync('token'),
			          'Cookie':wx.getStorageSync('cookie')
			        },
			        data:{
			          [this.key]:this.value
			        },
			        success(res){
			          let result = res.data
			          if(result.statusCode !== 0){
			            return uni.showToast({
			              title: result.msg,
			              icon:'error'
			            })
			          }
			          uni.navigateBack({
			            complete: (res) => {},
			          })
			        },
			        fail(error){
			          console.log(error)
			        }
			      })
			    },
			    toEditAvatar(e){
			      uni.redirectTo({
			        url: '/pages/user-avatar-edit/user-avatar-edit',
			      })
			    }
		  }
	}
</script>

<style lang="less">
/* pages/editUserInfo/editUserInfo.wxss */
.container{
  width: 100vw;
  height: 100vh;
  background-color: #f7f7f7;
  box-sizing: border-box;
  padding: 40rpx;
}
.input-box{
  width: 100%;
  box-sizing: border-box;
  padding: 12rpx 0;
  border-bottom: 2rpx solid #F6736E;
  display: flex;
  flex: 8 2;
  justify-content: space-between;
}
input{
  flex-grow: 1;
  color: #666;
  font-size: 32rpx;
}
.submit-btn{
  flex-shrink: 0;
  color: #F6736E;
  font-size: 32rpx;
}
.image-box{
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.user-avatar{
  width: 100vw;
  height: 100vw;
}
.edit-avatar{
  position: absolute;
  left: 0;
  bottom: 100rpx;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.edit-avatar >view{
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
  color: #fff;
  font-size: 28rpx;
  border: 2rpx solid #fff;
}
</style>
